<li *ngFor="let child of lvMenuList">
  <div
    *ngIf="!child.hidden && child.title"
    class="lv-dropdown-title"
    (mouseenter)="setMouseEnterState($event, null, true)"
    (mouseleave)="setMouseEnterState($event, null, false)"
  >
    <ng-container [ngSwitch]="true">
      <ng-container *ngSwitchCase="typeUtils.isTemplateRef(child.title)">
        <ng-container *ngTemplateOutlet="child.title; context: { $implicit: child }"></ng-container>
      </ng-container>
      <ng-container *ngSwitchDefault>{{ child.title }}</ng-container>
    </ng-container>
  </div>
  <div
    class="lv-dropdown-item"
    [ngClass]="{ 'lv-dropdown-parent-hover': child._parentHover }"
    [ngStyle]="{ display: child.hidden ? 'none' : 'flex' }"
    (click)="itemClick($event, child)"
    (mouseenter)="setMouseEnterState($event, child, true)"
    (mouseleave)="setMouseEnterState($event, child, false)"
    [lv-tooltip]="child.tips"
    lvTooltipPosition="right"
    [attr.disabled]="child.disabled === '' || child.disabled ? '' : null"
  >
    <i *ngIf="child.icon" class="i-icon" [lvDisabled]="child.disabled" lv-icon="{{ child.icon }}"></i>

    <span
      [ngSwitch]="true"
      [lv-overflow]="
        !(
          typeUtils.isTemplateRef(child.label) ||
          (!typeUtils.isTemplateRef(child.label) && typeUtils.isTemplateRef(_dropdown.lvLabelTemplate))
        )
      "
    >
      <ng-container *ngSwitchCase="typeUtils.isTemplateRef(child.label)">
        <ng-container *ngTemplateOutlet="child.label; context: { $implicit: child }"></ng-container>
      </ng-container>

      <ng-container
        *ngSwitchCase="!typeUtils.isTemplateRef(child.label) && typeUtils.isTemplateRef(_dropdown.lvLabelTemplate)"
      >
        <ng-container *ngTemplateOutlet="_dropdown.lvLabelTemplate; context: { $implicit: child }"></ng-container>
      </ng-container>

      <ng-container *ngSwitchDefault>{{ child.label }}</ng-container>
    </span>
    <i [lvDisabled]="child.disabled" *ngIf="child.items" class="i-trigger" lv-icon="lv-icon-arrow-next"></i>
  </div>
  <div
    *ngIf="!child.hidden && child.divide"
    class="lv-dropdown-divider"
    (mouseenter)="setMouseEnterState($event, null, true)"
    (mouseleave)="setMouseEnterState($event, null, false)"
  ></div>
  <ng-template #templatePortal let-data let-level="level">
    <ul
      [@showSubItem]="_animationState"
      (@showSubItem.done)="onAnimationDone($event)"
      [ngClass]="{
        'lv-theme-dark': _dropdown.lvTheme == 'dark',
        'lv-dropdown-size-large': _dropdown.lvSize === 'large',
        'lv-dropdown-panel': true
      }"
      class="{{ 'level' + (lvMenuLevel + 1) + '&nbsp;' + _dropdown.lvPanelClass }}"
      *ngIf="data.items"
      lv-submenu
      [lvMenuList]="data.items"
      [lvCurrentHoverId]="_dropdown.hoverItemId"
      [lvMenuLevel]="level + 1"
      (mouseenter)="handleMouseEnterOrLeave(true)"
      (mouseleave)="handleMouseEnterOrLeave(false)"
    ></ul>
  </ng-template>
</li>

<!-- 数据为空 -->
<li class="lv-dropdown-option-null" (click)="$event.stopPropagation()" *ngIf="!lvMenuList?.length">
  <lv-empty [lvImage]="null"></lv-empty>
</li>
